<template>
  <n-button @click="show = !show" round
            class="transition-all transition-500"
            style="padding-right: 35px; padding-left: 10px"
            :class="[show?'translate-x-1/4':'translate-x-1/2']"
            secondary>
    <TextIcon v-if="show" :size="25" icon="icon-park-outline:expand-left" tip="收缩"></TextIcon>
    <TextIcon v-else icon="icon-park-outline:expand-right" tip="展开"></TextIcon>
  </n-button>
  <n-drawer v-model:show="show" width="300" placement="right">
    <slot ></slot>
  </n-drawer>
</template>

<script setup lang="ts">

import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {ref} from "vue";



const show = ref(false)

</script>

<style scoped>


</style>